<template>
  <view class="work">
    <!-- 筛选 -->
    <wd-drop-menu close-on-click-modal class="mb-20rpx mr-20rpx ml-20rpx">
      <wd-drop-menu-item ref="dropMenu" title="筛选" icon="filter" icon-size="18px">
        <view>
          <wd-input
            v-model="queryParams.keywords"
            label="关键字"
            type="text"
            clearable
            placeholder="请输入关键字"
          />
          <view class="flex flex-row items-center mb-20rpx">
            <wd-button class="mt-20rpx mb-20rpx" size="medium" @click="handleQuery()">
              查询
            </wd-button>
            <wd-button size="medium" type="info" @click="handleReset">重置</wd-button>
          </view>
        </view>
      </wd-drop-menu-item>
    </wd-drop-menu>

    <view class="data-container">
      <!-- 列表内容 -->
      <view v-for="(item, index) in pageData" :key="index" class="mb-20rpx">
        <wd-card>
          <template #title>
            <view class="flex items-center justify-between">
              <view class="flex-1 text-truncate">{{ item.configName }}</view>
            </view>
          </template>

          <wd-cell-group>
            <wd-cell title="配置键" :value="item.configKey" />
            <wd-cell title="配置值" :value="item.configValue" />
            <wd-cell title="备注" :value="item.remark" />
          </wd-cell-group>

          <template #footer>
            <wd-button size="small" plain type="primary" @click="handleAction(item)">
              操作
            </wd-button>
          </template>
        </wd-card>
      </view>
    </view>

    <!-- 加载更多 -->
    <wd-loadmore :state="state" @reload="handleQuery" />

    <!-- 底部按钮 -->
    <view class="fixed bottom-0 w-full flex justify-around items-center p-20rpx bg-#fff">
      <wd-button size="medium" type="primary" @click="handleOpenDialog">添加</wd-button>
      <wd-button size="medium" type="success" @click="refreshCache">刷新缓存</wd-button>
    </view>

    <wd-popup v-model="showEditPopup" position="bottom">
      <view class="p-20rpx">
        <wd-form ref="formRef" :model="form">
          <wd-input
            v-model="form.configName"
            label="配置名称"
            type="text"
            placeholder="请输入配置名称"
            :rules="[{ required: true, message: '请填写配置名称' }]"
          />
          <wd-input
            v-model="form.configKey"
            label="配置键名"
            type="text"
            placeholder="请输入配置键名"
            :rules="[{ required: true, message: '请填写配置键' }]"
          />
          <wd-input
            v-model="form.configValue"
            label="配置键值"
            type="text"
            placeholder="请输入配置键值"
            :rules="[{ required: true, message: '请填写配置值' }]"
          />
          <wd-textarea
            v-model="form.remark"
            prop="remark"
            label="配置描述"
            label-align="right"
            clearable
            :maxlength="100"
            show-word-limit
            label-width="100px"
            placeholder="请输入配置描述"
          />
        </wd-form>
        <view class="flex justify-around mt-20rpx">
          <wd-button @click="showEditPopup = false">取消</wd-button>
          <wd-button type="primary" native-type="submit" :loading="loading" @click="submitForm">
            确定
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";
import { DropMenuItemExpose } from "wot-design-uni/components/wd-drop-menu-item/types";
import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
import { FormInstance } from "wot-design-uni/components/wd-form/types";
import { debounce } from "@/utils";
const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
const total = ref(0);
const queryParams = reactive<ConfigPageQuery>({
  pageNum: 1,
  pageSize: 10,
  keywords: "",
});
// 系统配置表格数据
const pageData = ref<ConfigPageVO[]>([]);
const formRef = ref<FormInstance>();

const loading = ref(false);

/**
 * 搜索栏
 */
const dropMenu = ref<DropMenuItemExpose>();

/**
 * 搜索
 */
function handleQuery() {
  pageData.value = [];
  dropMenu.value?.close();
  queryParams.pageNum = 1;
  loadmore();
}

const showEditPopup = ref(false);
const form = ref<ConfigForm>({});

// 修改编辑函数
function handleEdit(id: number) {
  ConfigAPI.getFormData(id).then((data) => {
    Object.assign(form.value, data);
    // 显示弹窗
    showEditPopup.value = true;
  });
}

// 提交表单
async function submitForm() {
  loading.value = true;
  try {
    if (formRef.value) {
      formRef.value!.validate().then(async ({ valid, errors }) => {
        if (valid) {
          if (form.value.id) {
            await ConfigAPI.update(form.value.id, form.value);
            uni.showToast({ title: "更新成功", icon: "success" });
          } else {
            await ConfigAPI.add(form.value);
            uni.showToast({ title: "添加成功", icon: "success" });
          }
          showEditPopup.value = false;
          handleQuery(); // 刷新列表
        } else {
          uni.showToast({ title: "请检查表单", icon: "error" });
          loading.value = false;
        }
      });
    }
  } catch (error) {
    uni.showToast({ title: "操作失败", icon: "error" });
    loading.value = false;
  } finally {
    loading.value = false;
  }
}

/**
 * 重置搜索条件
 */
function handleReset() {
  queryParams.pageNum = 1;
  queryParams.keywords = "";
  pageData.value = [];
  dropMenu.value?.close();
  handleQuery();
}

/**
 * 触底事件
 */
onReachBottom(() => {
  queryParams.pageNum++;
  handleQuery();
});

/**
 * 加载更多
 */
function loadmore() {
  state.value = "loading";
  ConfigAPI.getPage(queryParams)
    .then((data) => {
      if (queryParams.pageNum === 1) {
        pageData.value = data.list;
      } else {
        pageData.value.push(...data.list);
      }
      total.value = data.total;
    })
    .finally(() => {
      state.value = "finished";
    });
}

/**
 * 添加
 */
function handleOpenDialog() {
  form.value.id = undefined;
  form.value.configName = "";
  form.value.configKey = "";
  form.value.configValue = "";
  form.value.remark = "";
  showEditPopup.value = true;
}

/**
 * 刷新缓存
 */
const refreshCache = debounce(() => {
  ConfigAPI.refreshCache().then(() => {
    uni.showToast({
      title: "刷新缓存成功",
      icon: "success",
      duration: 1000, // 显示时间，单位为毫秒，设置为 0 则不会自动消失
    });
  });
}, 1000);

/**
 * 删除
 */
function handleDelete(item: ConfigPageVO) {
  uni.showModal({
    title: "提示",
    content: "确定要删除该配置吗？",
    success: async (res) => {
      if (res.confirm) {
        if (item.id) {
          ConfigAPI.deleteById(item.id).then(() => {
            uni.showToast({ title: "删除成功", icon: "success" });
          });
        }
      }
    },
  });
}

/**
 * 操作
 */
function handleAction(item: ConfigPageVO) {
  const actions = ["编辑", "删除"];
  uni.showActionSheet({
    itemList: actions,
    success: ({ tapIndex }) => {
      switch (actions[tapIndex]) {
        case "编辑":
          handleEdit(item.id || 0);
          break;
        case "删除":
          handleDelete(item);
          break;
      }
    },
  });
}

onMounted(() => {
  handleQuery();
});

/**
 * 页面返回回来也要重新加载数据
 */
onLoad(() => {
  queryParams.pageNum = 1;
  handleQuery();
});
</script>
<style lang="scss" scoped>
.data-container {
  :deep(.wd-cell__wrapper) {
    padding: 4rpx 0;
  }

  :deep(.wd-cell) {
    padding-right: 10rpx;
    background: #f8f8f8;
  }

  :deep(.wd-fab__trigger) {
    width: 80rpx !important;
    height: 80rpx !important;
  }

  :deep(.wd-cell__right) {
    flex: 2;
  }

  .filter-container {
    padding: 10rpx;
    background: #fff;
  }

  .data-container {
    margin-top: 20rpx;
  }
}
</style>
